<template>
  <div v-if="device !== 'mobile'" class="pc">
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 15px">
      <el-tab-pane label="我创建的" name="myCreateProject" lazy>
        <myCreateProject ref="myCreateProject"></myCreateProject>
      </el-tab-pane>
      <el-tab-pane label="我负责的" name="myChargeProject" lazy>
        <myChargeProject
          ref="myChargeProject"
          :projectId="projectId"
        ></myChargeProject>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div v-else class="phone">
    <van-nav-bar
      title="项目管理"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" @click="open()" />
      </template>
    </van-nav-bar>

    <myCreateProjectMobile
      v-if="tabbarActive === 0"
      ref="myCreateProject"
      :queryParams="queryParams"
      style="margin-top: 50px"
    ></myCreateProjectMobile>
    <myChargeProjectMobile
      v-if="tabbarActive === 1"
      ref="myChargeProject"
      :projectId="projectId"
      :queryParams="queryParams"
      style="margin-top: 50px"
    ></myChargeProjectMobile>
    <van-tabbar v-model="tabbarActive">
      <van-tabbar-item icon="edit">我创建的</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我负责的</van-tabbar-item>
    </van-tabbar>

    <searchDialog
      ref="searchDialog"
      @getList="getList"
      :deptFlag="active === 'deptDetailsMoilb'"
      :groupFlag="active === 'groupDetailsMoilb'"
    />
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import myChargeProject from "./pc/myChargeProject.vue";
import myCreateProject from "./pc/myCreateProject.vue";
import searchDialog from "./components/mobile/searchDialog.vue";

import myChargeProjectMobile from "./mobile/myChargeProjectMobile.vue";
import myCreateProjectMobile from "./mobile/myCreateProjectMobile.vue";

export default {
  components: {
    myChargeProject,
    myCreateProject,
    searchDialog,
    myChargeProjectMobile,
    myCreateProjectMobile,
  },
  data() {
    return {
      activeName: "myCreateProject",
      active: "myCreateProject",
      projectId: "",
      queryParams: {},
      tabbarActive: 0,
    };
  },
  computed: {
    ...mapGetters(["device", "name"]),
  },
  created() {
    if (this.$route.query.active) {
      this.activeName = this.$route.query.active;
      this.active = this.$route.query.active;
    }
    if (this.$route.query.projectId) {
      this.projectId = this.$route.query.projectId;
    }

    this.$nextTick(() => {
      this.$refs[this.activeName].getData();
    });
  },
  methods: {
    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs[this.activeName].getData();
      });
    },
    onClickLeft() {
      this.$router.push("/");
    },

    open() {
      this.$refs.searchDialog.open();
    },

    getList(queryParams) {
      this.queryParams = queryParams;
      this.$nextTick(() => {
        this.$refs[this.active].handleQuery();
      });
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .el-drawer {
  width: 65% !important;
}
</style>